<template>
	<view class="container">
		<view class="container__input" @click="commentClick">我有话要说...</view>
		<view class="container__icon" @click="scrollToComment">
			<image style="width: 35rpx;height: 35rpx;" src="@/static/theme/default/home/comment/comment.png" mode="">
			</image>
			<view class="container__icon--num">{{themeInfo.ReplyCount == 0 ? '回复' : themeInfo.ReplyCount}}</view>
		</view>
		<view class="container__icon" @click="like">
			<image style="width: 35rpx;height: 35rpx;" src="@/static/theme/default/home/comment/dianzhan.png" mode=""
				v-if="!isLike"></image>
			<image :class="['animated',(isLike ? 'jackInTheBox' : '')]" style="width: 35rpx;height: 35rpx;"
				src="@/static/theme/default/home/comment/dianzhan_active.png" mode="" v-else></image>
			<view class="container__icon--num" :style="{color: isLike ? '#e16531' : ''}">{{setThemeLikeNum(themeInfo)}}
			</view>
		</view>
		<nav-bar :show="commentVisible" :title="title" :type="type" :menu="menu" @submit="submit" @close="close"/>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import NavBar from '@/components/custom/navbar/navbar.vue'
	import {imgStrigify} from '@/common/custom_util.js'
	
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				themeInfo: {
					LikesCount: 0,
					MyLikesCount: 0,
					ReplyCount: 0,
					TopicId: '',
				},//主题信息
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				isLike: false,
				type: 'theme-comment',
				menu: [],
				title: '发表评论',
				commentVisible: false,
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			router: {
				type: String,
				required: true,
				default: ''
			},
		},
		watch: {
			data: {
				deep: true,
				handler() {
					this.getTopicInfo();
				}
			}
		},
		methods: {
			/**
			 * 获取主题信息
			 */
			getTopicInfo() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getTopicInfo',
					apiparam: {
						topicrouter: this.router,
						businessid: this.data.businessId,
						obsusername: this.obsusername,
						obspxid: this.pxid
					},
					success(res) {
						if(!res.length) return
						that.themeInfo = res[0]
						that.isLike = that.themeInfo.MyLikesCount == '0' ? false : true;
					}
				})
			},
			/**
			 * 创建主题点赞
			 */
			addTopicLikes(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicLikes',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题回复
			 */
			addTopicReply(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicReply',
						apiparam: apiparam,
						success(res) {
							uni.showToast({
								title: '评论成功',
								icon: 'none'
							})
							if(res.length) that.data.topicId = res[0].TopicId;
							resolve(res)
						},
						fail() {
							uni.showToast({
								title: '评论失败!',
								icon: 'none'
							})
						}
					})
				})
			},
			/**
			 * 创建主题艾特相关人数据
			 */
			addTopicAt(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicAt',
						code: 13,
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 主题回复
			 */
			commentClick() {
				this.type = 'theme-comment';
				this.menu = [0,1,2,4];
				this.title = '发表评论';
				this.commentVisible = true;
				this.$emit('preventScroll')
			},
			/**
			 * 点赞
			 * @param {Object} v
			 */
			like() {
				this.isLike = !this.isLike;
				let LikesCount = this.themeInfo.LikesCount*1;
				if(this.isLike) {
					LikesCount = ++LikesCount;
				} else {
					LikesCount = --LikesCount;
				}
				let MyLikesCount = this.themeInfo.MyLikesCount == '1' ? '0' : '1';
				this.$set(this.themeInfo,'LikesCount',LikesCount);
				this.$set(this.themeInfo,'MyLikesCount',MyLikesCount);
				this.addTopicLikes({
					topicid: this.data.topicId,
					topicrouter: this.router,
					businessid: this.data.businessId,
					owner: this.data.owner,
					ownerpxid: this.data.ownerPxid,
					replyid: '',//直接点赞业务时不用传
					createuser: this.obsusername,
					createpxid: this.pxid,
					flag: this.isLike ? 0 : 1,
				})
			},
			/**
			 * 提交评论
			 * @param {Object} v
			 */
			submit(v) {
				let text = v.value.text;
				let users = v.value.users;
				let factorys = v.value.factorys;
				let images = v.value.images;
				this.addTopicReply({
					topicid: this.data.topicId,
					topicrouter: this.router,
					businessid: this.data.businessId,
					owner: this.data.owner,
					ownerpxid: this.data.ownerPxid,
					replyid: '',
					createuser: this.obsusername,
					createpxid: this.pxid,
					replycontent: text,
					replyimages: images.join(',')
				}).then(res => {
					console.log(res)
					console.log(users)
					if(res.length) {
						let replyid = res[0].ReplyId;
						let topicId = res[0].TopicId;
						uni.$emit('getData',replyid);
						if(!users.length) return
						let params = [];
						let timestamp = (new Date()).valueOf();
						users.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atusername: item.pname,
								atuserpxid: item.pxid,
							})
						})
						factorys.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atobscode: item.OBSCODE,
							})
						})
						this.addTopicAt(params)
					}
				})
			},
			/**
			 * 弹窗关闭
			 */
			close() {
				this.commentVisible = false;
				this.$emit('allowScroll')
			},
			/**
			 * 滚动到评论区
			 */
			scrollToComment() {
				uni.$emit('scrollToComment');
			},
			/**
			 * 设置赞的数量
			 * @param {Object} v
			 */
			setThemeLikeNum(v) {
				if(v.LikesCount != '0') return v.LikesCount
				if(v.LikesCount == '0') return '赞'
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		height: 100rpx;
		background-color: #eee;
		padding: 0 20rpx;
		box-sizing: border-box;
	
		&__input {
			width: 440rpx;
			height: 60rpx;
			background-color: #fff;
			color: #aaa;
			padding-left: 20rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			line-height: 60rpx;
		}
	
		&__icon {
			width: 100rpx;
			height: 100%;
			padding: 10rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
	
			&--num {
				font-size: 25rpx;
				color: #aaa;
				margin-left: 10rpx;
			}
		}
	}
</style>
